/* 底部列表容器样式 */
.section {
    margin-top: 15px;
    /* 上边距 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    display: flex;
    /* 弹性布局 */
    justify-content: center;
    /* 水平居中 */
    height: 340px;
    /* 高度 */
    margin-bottom: 10px;
    /* 下边距 */
}

/* 底部列表链接样式 */
.section a {
    text-decoration: none;
    /* 去掉下划线 */
}

/* 底部列表三列布局 */
.left-01,
.middle-01,
.right-01 {
    float: left;
    /* 左浮动 */
    width: 320px;
    /* 宽度 */
    height: 340px;
    /* 高度 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    margin-right: 10px;
    /* 右边距 */
}

/* 标题区域样式 */
.title-01 {
    height: 40px;
    /* 高度 */
    border-bottom: 2px solid #ccc;
    /* 底部边框 */
    font-family: 'Microsoft YaHei', Arial, Verdana, sans-serif;
    /* 字体 */
    position: relative;
    /* 相对定位 */
    overflow: hidden;
    zoom: 1;
    /* 兼容IE6 */
    margin-right: 20px;
    /* 右边距 */
}

/* 标题区域选中样式 */
.title-01 .select {
    display: block;
    /* 块级显示 */
    height: 40px;
    /* 高度 */
    line-height: 40px;
    /* 行高 */
    width: 104px;
    /* 宽度 */
    text-align: center;
    /* 文本居中 */
    background-color: #286FB7;
    /* 背景颜色 */
    position: absolute;
    /* 绝对定位 */
    left: 0;
    /* 靠左对齐 */
}

/* 标题区域更多链接样式 */
.title-01 .more {
    float: right;
    /* 靠右浮动 */
    line-height: 40px;
    /* 行高 */
    padding-right: 10px;
    /* 右边距 */
}

/* 标题区域选中链接样式 */
.title-01 .select a {
    font-size: 16px;
    /* 字体大小 */
    color: #fff;
    /* 字体颜色 */
}

/* 底部列表ul样式 */
.section .left-01 ul,
.section .middle-01 ul,
.section .right-01 ul {
    margin: 0 10px;
    /* 边距 */
    overflow: hidden;
    zoom: 1;
    /* 兼容IE6 */
    list-style-type: none;
    /* 去掉列表圆点 */
    padding: 0;
    /* 移除默认的内边距 */
    width: 100%;
    /* 确保 ul 宽度为 100% */
}

/* 底部列表li样式 */
.section .left-01 li,
.section .middle-01 li,
.section .right-01 li {
    height: 38px;
    /* 高度 */
    line-height: 38px;
    /* 行高 */
    background: url(images/dd.jpg) repeat-x left bottom;
    /* 背景图片 */
    display: block;
    /* 块级显示 */
    margin: 0;
    /* 移除默认的外边距 */
    border-bottom: 1px dashed #ccc;
    /* 底部虚线 */
    width: 100%;
    /* 确保 li 宽度与 ul 相同 */
    text-align: left;
    /* 左对齐文本 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
}

/* 底部列表链接样式 */
.section .left-01 li a,
.section .middle-01 li a,
.section .right-01 li a {
    height: 38.8px;
    /* 高度 */
    display: block;
    /* 块级显示 */
    padding-left: 15px;
    /* 左边距 */
    background: url(images/icon-17.png) no-repeat 5px center;
    /* 图标背景 */
    font-family: arial, verdana, sans-serif;
    /* 字体 */
    font-size: 12px;
    /* 字体大小 */
    text-decoration: none;
    /* 去掉链接下划线 */
    color: inherit;
    /* 继承父元素的颜色 */
}

/* 轮播图容器样式 */
.carousel-container {
    position: relative;
    /* 相对定位 */
    width: 329px;
    /* 宽度 */
    height: 190px;
    /* 高度 */
    max-height: 400px;
    /* 最大高度 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    border: 2px solid #ccc;
    /* 边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 阴影 */
    margin-bottom: 10px;
    /* 下边距 */
}

/* 轮播图图片样式 */
.carousel-images {
    display: flex;
    /* 弹性布局 */
    transition: transform 0.5s ease-in-out;
    /* 平滑过渡 */
    flex-wrap: nowrap;
    /* 防止图片换行 */
}

.carousel-img {
    width: 100%;
    /* 图片宽度调整为容器的100% */
    height: auto;
    /* 高度自动 */
    object-fit: cover;
    /* 图片保持覆盖，不拉伸 */
    opacity: 0;
    /* 透明度 */
    transition: opacity 0.5s ease-in-out;
    /* 平滑过渡 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左部对齐 */
}

.carousel-img.active {
    opacity: 1;
    /* 透明度为1，显示图片 */
}

/* 控制按钮样式和布局 */
.carousel-controls {
    position: absolute;
    /* 绝对定位 */
    bottom: 10px;
    /* 底部边距 */
    right: 10px;
    /* 右边距 */
    display: flex;
    /* 弹性布局 */
    gap: 10px;
    /* 间隔 */
    margin-right: 5px;
    /* 右边距 */
}

/* 控制按钮样式 */
.carousel-control {
    background-color: rgba(0, 0, 0, 0.5);
    /* 背景颜色 */
    color: #fff;
    /* 字体颜色 */
    padding: 5px 8px;
    /* 内边距 */
    text-decoration: none;
    /* 去掉下划线 */
    border-radius: 5px;
    /* 圆角 */
    cursor: pointer;
    /* 鼠标手形 */
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.7);
    /* 鼠标悬浮时背景颜色 */
}

/* 轮播图链接容器样式 */
.carousel-links-container {
    display: flex;
    /* 弹性布局 */
    justify-content: center;
    /* 水平居中 */
    width: 329px;
    /* 宽度 */
    gap: 10px;
    /* 间隔 */
    margin-top: -10px;
    /* 上边距 */
    margin-bottom: 0px;
    /* 下边距 */
}

/* 轮播图链接样式 */
.carousel-link {
    color: #000;
    /* 字体颜色 */
    padding: 2px 10px;
    /* 内边距 */
    text-decoration: none;
    /* 去掉下划线 */
    border-radius: 15px;
    /* 圆角 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    /* 为溢出的文本添加省略号 */
    display: none;
    /* 默认不显示 */
    font-size: 12px;
    /* 字体大小 */
}

.carousel-link.active {
    display: block;
    /* 显示链接 */
    color: #222222;
    /* 字体颜色 */
    font-size: 14px;
    /* 字体大小 */
}

.carousel-control.active {
    background-color: rgb(243, 123, 10);
    /* 背景颜色 */
    color: #fff;
    /* 字体颜色 */
}